<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcss.com/element-ui/2.15.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body class="login-container">
<div id="app">
    <el-form ref="loginForm" :model="loginForm"  class="login-form" auto-complete="on" label-position="left">

        <div class="title-container">
            <h3 class="title">用户登录</h3>
        </div>
        <el-form-item prop="username">
            <el-input
                    ref="username"
                    v-model="loginForm.username"
                    placeholder="username"
                    name="username"
                    type="text"
                    tabindex="1"
                    auto-complete="on"
            />
        </el-form-item>

        <el-form-item prop="password">
            <el-input
                    :key="passwordType"
                    ref="password"
                    v-model="loginForm.password"
                    :type="passwordType"
                    placeholder="Password"
                    name="password"
                    tabindex="2"
                    auto-complete="on"
                    @keyup.enter.native="handleLogin"
            />
        </el-form-item>

        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
    </el-form>
</div>
</body>

<script>
new Vue({
    el: '#app',
    created(){
        //设置全局的
        var instance = axios.create({
            timeout: 1000
            //headers: {'Content-Type': 'application/json;charset=utf-8'}
        });
        this.$axios = instance;
    },
    mounted(){
        //this.timer = setInterval(this.fleshList, 1000);
    },
    beforeDestroy() {

    },
    data() {
        return {
            $axios:{},
            loginForm: {
                username: 'admin',
                password: 'admin'
            },
            loading: false,
            passwordType: 'password',
            redirect: undefined
        }
    },
    methods:{
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        handleLogin() {
            // let there = this;
            // this.post("/user/login",this.loginForm,function (res) {
            //     if(200 === res.code){
            //         there.success("成功登录");
            //         setTimeout(function () {
            //             window.location.href='/main';
            //         },500)
            //     }else {
            //         this.error("登录失败")
            //     }
            // })
            let there = this;
            let param = "username="+this.loginForm.username+"&password="+this.loginForm.password;
            this.get("/user/login?"+param,function (res) {
                if(200 === res.code){
                    there.success("成功登录");
                    setTimeout(function () {
                        window.location.href='/main';
                    },500)
                }else if (401 === res.code){
                    there.success("权限不足");
                }
                else {
                    there.error(res.message)
                }
            })
        },
        post(url,data,callback){
            this.$axios.post(url,{'mUser':data}).then(function (res) {
                callback(res.data)
            }).catch(function (err) {
                console.log(err);
            });
        },
        get(url,callback){
            this.$axios.get(url).then(function (res) {
                callback(res.data)
            }).catch(function (err) {
                console.log(err);
            });
        },
        error(mes){
            this.$message({
                message: mes,
                type: 'error'
            });
        },
        success(mes){
            this.$message({
                message: mes,
                type: 'success'
            });
        },
        warn(mes){
            this.$message({
                message: mes,
                type: 'warn'
            });
        }
    }
})
</script>

<style>
    .login-container {
        min-height: 100%;
        width: 100%;
        background-color: #2d3a4b;
        margin: 0;
        overflow: hidden;
    }
    .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .title-container {
        position: relative;
        color: whitesmoke;

    }
    .title {
        font-size: 26px;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
    }
</style>

</html>